<template>
    <el-dialog v-model="isShowDialog" draggable :close-on-click-modal="false" width="500">
        <template #header>
            <div style="color: #fff">
                <el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle" color="yellow">
                    <QuestionFilled />
                </el-icon>
                <span>{{ props.title }}</span>
            </div>
        </template>
        <slot> <span style="background-color: darkcyan; padding: 3px; color:white; border-radius: 3px;">
                {{ props.message }}
            </span>
        </slot>
        <template #footer>
            <slot name="footer">
                <el-button @click="closeDialog">
                    取 消</el-button>
                <el-button @click="submit" type="primary" v-if="props.isDelay == false">
                    确 定</el-button>
                <el-button @click="submit" type="primary" v-if="props.isDelay" :disabled="isDisabled">
                    {{ buttonText }}
                </el-button>
            </slot>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { QuestionFilled } from '@element-plus/icons-vue'
import { ElInput, ElTableColumn, ElTable, ElCol, ElIcon, ElButton, ElDialog } from 'element-plus';
// 延时确认对话框,不延时用ElMessageBox.confirm
defineOptions({
    name: 'MkDialogConfirm'
})
// props
const props = defineProps({
    title: {
        type: String,
        default: '请确认'
    },
    message: { //要删除的内容的标题
        type: String,
        default: ''
    },
    isDelay: { //默认延时
        type: Boolean,
        default: true
    },
})

const isShowDialog = ref(false)
let _funConfirm: Function //确认后调用的方法

const config = ref({
    confirmCallback: (show: boolean) => { },
    cancelCallback: () => { },
    destory: () => { }
})

// 确定事件,默认关闭对话框
const submit = () => {
    //父组件可以修改isCloseDialog.value来阻止窗口关闭, 默认关闭
    isShowDialog.value = false;
    config.value.confirmCallback(true);
    config.value.destory()
};

// 打开弹窗, 必须外部主动调用此方法, 主动触发MkButtonDelay组件的倒计时
const openDialog = () => {
    isShowDialog.value = true;
    startCountdown() //开始倒计时
};

// 关闭弹窗
const closeDialog = () => {
    isShowDialog.value = false;
    config.value.cancelCallback();
    config.value.destory()
};

defineExpose({
    openDialog, closeDialog, config
})

//-----------------------------以下是延迟确认按钮的逻辑--------------------------

const isDisabled = ref(true);
const countdown = ref(3); // 倒计时时长，单位为秒
let doCount = true;

let timer = setInterval(() => {
    if (doCount) {
        countdown.value -= 1;
        if (countdown.value <= 0) {
            doCount = false;//停止倒计时
            isDisabled.value = false;//按钮可用
        }
    }
}, 1000);

const buttonText = computed(() => {
    return isDisabled.value ? ` ${countdown.value} ` : '确 定';
});

// 启动倒计时
const startCountdown = () => {
    countdown.value = 3; //重置倒计时
    doCount = true;//开始倒计时
    isDisabled.value = true;//按钮不可用
};

// 组件销毁前清除计时器，防止内存泄漏
onBeforeUnmount(() => {
    if (timer) {
        clearInterval(timer);
    }
});


</script>
